<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '订单详情',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full pos-relative z-1 bg-#F6F6F8">
      <wd-navbar @click-left="handleClickLeft">
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">订单详情</text>
        </template>
        <template #left>
          <wd-icon name="chevron-left" class="text-gray-333 font-size-44"></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full home-content ps-b-180">
        <view>
          <view class="hr-160 p-x-28 flex justify-center flex-col box-bg">
            <view class="flex justify-between items-center">
              <view class="font-size-40 line-h-56 text-white font-500">退款已申请，待商家审核</view>
              <view class="wr-56 hr-56">
                <image width="100%" height="100%" :src="statuIcons" />
              </view>
            </view>
          </view>
        </view>
        <view class="bg-white p-x-34 p-y-32">
          <view class="font-size-32 font-500 text-gray-333 line-h-44">
            <text>退回金额：</text>
            <text class="text-blue-1">￥79.9</text>
          </view>
          <!-- <view class="font-size-28 font-400 text-gray-333 line-h-40 mg-t-20">
            <text>几遍</text>
            <text class="mg-l-5">15211178012</text>
          </view> -->
        </view>
        <view class="w-full bg-white mg-t-20">
          <view class="w-full p-x-28">
            <view class="flex justify-start items-center p-y-34">
              <wd-img
                :width="'160rpx'"
                :height="'160rpx'"
                custom-class="b-rd-8 overflow-hidden"
                :src="joy"
              />
              <view class="wr-500 mg-l-24">
                <view
                  class="flex justify-between items-start font-size-28 font-500 text-gray-333 line-h-40"
                >
                  <view>商品名称商品名称商品名称商品名称商品名称</view>
                  <view class="mg-l-50">￥50</view>
                </view>
                <view
                  class="flex justify-between items-start font-size-24 font-400 text-gray-999 line-h-36 mg-t-24"
                >
                  <view>灰色；S</view>
                  <view>X1</view>
                </view>
              </view>
            </view>
            <view class="w-full hr-2 bg-#F5F5F5"></view>
          </view>
        </view>
        <view class="mg-t-20 ps-t-32 ps-b-1 bg-white">
          <view
            class="p-x-28 flex justify-between bg-white mg-b-40"
            v-for="(item, index) in productInfo"
            :key="index"
          >
            <view class="font-size-28 font-400 text-gray-333 line-h-40 wr-230">
              {{ item.name }}
            </view>
            <view class="flex justify-center items-center">
              <view v-if="item.value">
                <text class="font-size-28 font-400 text-gray-999 line-h-40">{{ item.value }}</text>
              </view>
              <view class="flex justify-end" v-if="item.imgs">
                <wd-img
                  v-for="(img, iIndex) in item.imgs"
                  :key="iIndex"
                  :width="'112rpx'"
                  :height="'112rpx'"
                  custom-class="b-rd-8 overflow-hidden mg-r-10"
                  :src="img"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view
        class="pos-absolute pos-bottom-0 pos-left-0 w-full hr-156 bg-white p-x-32 ps-t-14 b-solid-#F5F5F5-2"
      >
        <view class="flex justify-end">
          <view class="wr-176 hr-72">
            <wd-button
              custom-class=" text-white font-size-32"
              type="info"
              size="small"
              plain
              @click="handleClickLeft"
            >
              <text class="font-size-28 font-400 text-gray-333">取消售后</text>
            </wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'OrderDetail',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const joy = ref('https://img.yzcdn.cn/vant/cat.jpeg')
const handleClickLeft = () => {
  uni.navigateTo({ url: '/pages/shopping/allOrder' })
}
const productInfo = ref([
  {
    name: '退货类型',
    value: '退货退款',
  },
  {
    name: '退货理由',
    value: '不喜欢',
  },
  {
    name: '退货说明',
    value: '这里是退货说明退货说明退货这里是说明退货说明退货说明',
  },
  {
    name: '凭证',
    // value: '备注备注备注备注备注备注备注备注备注备注备注备注备注备注',
    imgs: ['https://img.yzcdn.cn/vant/cat.jpeg', 'https://img.yzcdn.cn/vant/cat.jpeg'],
  },
])
const statuIcons = ref('../../static/images/icons/order-statu-1.png')
const statuType = ref('')
onLoad((options: any) => {
  statuType.value = options.type
})
const handleSendBack = () => {
  // uni.navigateTo({ url: '/pages/orders/sendBack' })
}
</script>

<style scoped lang="scss">
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
}
.box-bg {
  background: linear-gradient(138deg, #7195f8 0%, #aeb0ff 100%);
}
::v-deep .wd-search {
  padding: 0 !important;
  background: rgba(255, 255, 255, 0) !important;
}
::v-deep .wd-button {
  width: 100% !important;
  height: 100% !important;
}
</style>
